<template>
    <div class="el-container">
      <div>
        <div class="nav_box">
          <div>
            <h4>巡更记录</h4>
          </div>
          <div>
            <ul>
              <!-- <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>0</li> -->
            </ul>
          </div>
        </div>
        <!-- ......................................................................... -->
  
        <template>
          <el-table
            :key="tableKey"
            :data="tableData"
            border
            fit
            highlight-current-row
            style="width: 100%"
            :header-cell-style="{ background: '#ccc' }"
          >
            <!-- v-loading="listLoading" -->
            <!-- @sort-change="sortChange" -->
            <!-- <el-table-column type="selection" align="center" /> -->
            <el-table-column label="序号" prop="序号" align="center" width="80">
              <!-- :class-name="getSortClass('序号')" -->
              <template slot-scope="scop">
                <span>{{ scop.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备IP" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbIP }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡更位置" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbweizhi }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡更人员" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbdanwei }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡更时间" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.bjTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡更状态" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.sbzhuangtai }}</span>
              </template>
            </el-table-column>
  
            <!-- <el-table-column label="操作" align="center" min-width="141px" max-width="230px"
              class-name="small-padding fixed-width">
              <template slot-scope="{row,$index}">
                <el-button type="primary" size="mini" @click="handleUpdate(row.indexnum)">
                  编辑
                </el-button>
                <el-button v-if="row.status != 'deleted'" size="mini" type="danger"
                  @click="handleDelete(row.indexnum, $index)">
                  删除
                </el-button>
              </template>
            </el-table-column> -->
          </el-table>
  
          <!-- 底部导航 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.pageSize"
            @pagination="getList"
          />
        </template>
      </div>
    </div>
  </template>
    <script>
  import Pagination from "@/components/Pagination"; // 底部导航组件
  
  export default {
    components: { Pagination },
    data() {
      return {
        //   listLoading: true,
        tableKey: 0,
        tabList: [
          {
            prop: "serial ",
            tab_title: "序号",
          },
          {
            prop: "ip",
            tab_title: "设备IP",
          },
          {
            prop: " place",
            tab_title: "设备位置",
          },
          {
            prop: " number",
            tab_title: "设备编号",
          },
          {
            prop: " timer",
            tab_title: "报警时间",
          },
          {
            prop: " state",
            tab_title: "设备状态",
          },
          {
            prop: " tv",
            tab_title: "视频流",
          },
        ],
        total: 100,
        listQuery: {
          pageIndex: 1,
          pageSize: 10,
        },
        tableData: [
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
          {
            sbIP: "12345678",
            sbweizhi: "1#楼",
            sbwbianhao: "闸机",
            bjTime: "2020-05-19 11：23：43",
            sbzhuangtai: "在线",
            tvliu: "设备离线",
            sbwname: "刷卡机",
            kanum: 123456,
            karen: "王某",
            sbdanwei: "厦门海迈",
          },
        ],
      };
    },
    methods: {
      getList() {},//注释
    },
  };
  </script>
    <style lang="less">
  .el-container > div {
    width: 100%;
  }
  .nav_box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    ul {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
    }
  }
  </style>